<template>
    <div class="workbench">
        <div class="md:flex">
            <el-card class="!border-none mb-4 flex-1" shadow="never" style="min-width:1632px;">
                <template #header>
                    <div>
                        <span class="card-title">数据栏</span>
                    </div>
                </template>

                <div class="dataList">
                    <div class="box">
                        <div class="content">
                            <span>{{ data.wechat_num }}</span>
                            <p>公众号数量</p>
                        </div>
                        <div class="box1Line"></div>
                    </div>
                    <div class="box">
                        <div class="content">
                            <span>{{ data.domain_num }}</span>
                            <p>接入数量</p>
                        </div>
                        <div class="box2Line"></div>
                    </div>
                    <div class="box">
                        <div class="content">
                            <span>{{ data.record_num }}</span>
                            <p>登录请求数</p>
                        </div>
                        <div class="box3Line"></div>
                    </div>
                    <div class="box">
                        <div class="content">
                            <span>{{ data.callback_num }}</span>
                            <p>接入回调数</p>
                        </div>
                        <div class="box4Line"></div>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="md:flex">
            <el-card class="flex-1 !border-none md:mr-4 mb-4" shadow="never" style="width: 50%;">
                <template #header>
                    <span class="card-title">快捷操作</span>
                </template>
                <div class="md:flex flex">
                    <router-link :to="{
                        path: '/plug/access/setting',
                    }">
                        <div class="distance curson xiadan">
                            <img src="@/assets/images/gzhtj.png" alt="" style="margin: 0 auto;width: 75px;">
                            <span style="margin-top:5px;">添加公众号</span>
                        </div>
                    </router-link>
                </div>
            </el-card>
        </div>
        <div class="md:flex">
            <el-card class="flex-1 !border-none md:mr-4 mb-4" shadow="never">
                <template #header>
                    <span class="card-title">接口请求曲线</span>
                </template>
                <div>
                    <v-charts style="height: 350px" :option="workbenchData.visitorOption" :autoresize="true"></v-charts>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup name="workbench">
import vCharts from 'vue-echarts'
import feedback from "@/utils/feedback";
import { staticindex, getVisitStats } from '@/api/application/gzh/index'
// 表单数据
const workbenchData: any = reactive({
    version: {
        version: '', // 版本号
        website: '', // 官网
        based: '',
        channel: {
            gitee: '',
            website: ''
        },
    },
    support: [],
    today: {}, // 今日数据
    menu: [], // 常用功能
    visitor: [], // 访问量
    article: [], // 文章阅读量
    visitorOption: {
        xAxis: {
            type: 'category',
            data: [0]
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            data: ['请求量']
        },
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        tooltip: {
            trigger: 'axis'
        },
        series: [
            {
                name: '请求量',
                data: [0],
                type: 'line',
                smooth: true
            }
        ]
    },
    checekname: {}
})
const data = ref({

})
// 获取工作台主页数据
const getData = async () => {
    const results = await staticindex({})
    data.value = results
    getVisitStats({})
        .then((res: any) => {
            workbenchData.visitorOption.xAxis.data = []
            workbenchData.visitorOption.series[0].data = []
            res.forEach((item: any) => {
                workbenchData.visitorOption.xAxis.data.push(item.visit_date)
                workbenchData.visitorOption.series[0].data.push(item.visit_count)
            })
        })
        .catch((err: any) => {
            console.log('err', err)
        })
}
getData()


</script>

<style lang="scss" scoped>
.card-title {
    font-size: 20px;
    font-weight: 400;
}

.dataList {
    display: flex;

    .box {
        width: 210px;
        min-width: 163px;
        height: 120px;
        opacity: 1;
        border-radius: 10px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
        position: relative;
        margin-right: 22px;

        .content {
            margin-left: 32px;
            margin-top: 17px;
            font-size: 36px;
            position: relative;

            p {
                font-size: 16px;
                color: rgba(128, 128, 128, 1);
            }

            i {
                display: inline-block;
                position: absolute;
                width: 25px;
                height: 25px;
                background-size: cover;
                right: 27px;
                top: 16px;
            }
        }

    }
}

.box1Line {
    width: 210px;
    height: 8px;
    opacity: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: linear-gradient(90deg, rgba(254, 182, 51, 1) 0%, rgba(255, 227, 180, 1) 100%);
}

.box2Line {
    width: 210px;
    height: 8px;
    opacity: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: linear-gradient(90deg, rgba(130, 51, 255, 1) 0%, rgba(206, 192, 255, 1) 100%);
}

.box3Line {
    width: 210px;
    height: 8px;
    opacity: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: linear-gradient(90deg, rgba(254, 182, 51, 1) 0%, rgba(212, 48, 48, 1) 100%);
}

.box4Line {
    width: 210px;
    height: 8px;
    opacity: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: linear-gradient(90deg, rgba(254, 182, 51, 1) 0%, rgba(255, 227, 180, 1) 100%);
}

.box5Line {
    width: 210px;
    height: 8px;
    opacity: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: linear-gradient(90deg, rgba(172, 51, 193, 1) 0%, rgba(245, 217, 250, 1) 100%);
}

.box6Line {
    width: 210px;
    min-width: 163px;
    height: 8px;
    opacity: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 67, 146, 1) 0%, rgba(255, 176, 227, 1) 100%);
}

.box7Line {
    width: 210px;
    min-width: 163px;
    height: 8px;
    opacity: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: linear-gradient(90deg, rgba(48, 198, 148, 1) 0%, rgba(189, 239, 209, 1) 100%);
}

.box8Line {
    width: 210px;
    min-width: 163px;
    height: 8px;
    opacity: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: linear-gradient(90deg, rgba(51, 90, 255, 1) 0%, rgba(128, 170, 255, 1) 100%);
}

.inner {
    display: flex;
    margin-bottom: 20px;

    .leftCard {
        flex: 1;
        margin-right: 17px;
        min-width: 570px;
        height: 234px;

        .xcx {
            width: 547px;
            height: 68px;
            margin: 40px auto;
        }
    }

    .rightCard {
        flex: 1;
        margin-left: 17px;
        min-width: 600px;
    }
}

.dataList .box .content .bg6 {
    width: 25px;
    height: 25px;
    background: url("../../assets/images/工作台/r1.png");
    background-size: cover;
}

.dataList .box .content .bg7 {
    width: 25px;
    height: 25px;
    background: url("../../assets/images/工作台/r2.png");
    background-size: cover;
}

.dataList .box .content .bg8 {
    width: 25px;
    height: 25px;
    background: url("../../assets/images/工作台/r3.png");
    background-size: cover;
}

.flex {
    align-items: center;
}

.distance {
    margin-left: 50px;
}

.curson {
    cursor: pointer;
}

.xiadan {
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>
